<template>
  <div class="sidebar-container" :class="{ 'is-collapse': isCollapse }">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :active-text-color="variables.menuActiveText"
        :unique-opened="false"
        :collapse-transition="false"
        mode="vertical"
        router>
        
        <!-- Logo -->
        <div class="sidebar-logo-container" :class="{ 'collapse': isCollapse }">
          <transition name="sidebarLogoFade">
            <router-link v-if="isCollapse" key="collapse" class="sidebar-logo-link" to="/">
              <img src="https://element.eleme.io/static/icon.c9a01cc.svg" class="sidebar-logo">
            </router-link>
            <router-link v-else key="expand" class="sidebar-logo-link" to="/">
              <img src="https://element.eleme.io/static/icon.c9a01cc.svg" class="sidebar-logo">
              <h1 class="sidebar-title">笔记管理系统</h1>
            </router-link>
          </transition>
        </div>
        
        <!-- 首页 -->
        <el-menu-item index="/">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        
        <!-- 笔记管理 -->
        <el-submenu index="notes">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span>笔记管理</span>
          </template>
          <el-menu-item index="/notes">
            <i class="el-icon-notebook-1"></i>
            <span>笔记列表</span>
          </el-menu-item>
          <el-menu-item index="/categories">
            <i class="el-icon-collection-tag"></i>
            <span>分类管理</span>
          </el-menu-item>
          <el-menu-item index="/tags">
            <i class="el-icon-collection"></i>
            <span>标签管理</span>
          </el-menu-item>
        </el-submenu>
        
        <!-- 知识库管理 -->
        <el-menu-item index="/knowledge">
          <i class="el-icon-s-order"></i>
          <span slot="title">知识库管理</span>
        </el-menu-item>
        
        <!-- Excalidraw画板 -->
        <el-menu-item index="/excalidraw-demo">
          <i class="el-icon-edit"></i>
          <span slot="title">Excalidraw画板</span>
        </el-menu-item>
        
        <!-- 系统设置 -->
        <el-submenu index="system">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>系统设置</span>
          </template>
          <el-menu-item index="/user">
            <i class="el-icon-user"></i>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/role">
            <i class="el-icon-s-check"></i>
            <span>角色管理</span>
          </el-menu-item>
          <el-menu-item index="/permission">
            <i class="el-icon-lock"></i>
            <span>权限管理</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { EventBus, EventNames } from '@/utils/eventBus'

export default {
  name: 'Sidebar',
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      variables: {
        menuText: '#bfcbd9',
        menuActiveText: '#409EFF',
        menuBg: '#304156'
      }
    }
  },
  computed: {
    /**
     * 获取当前激活的菜单
     * @returns {String} 当前路由路径
     */
    activeMenu() {
      const { path } = this.$route
      return path
    }
  },
  created() {
    // 监听侧边栏折叠事件
    EventBus.$on(EventNames.TOGGLE_SIDEBAR, this.handleToggleSidebar)
  },
  beforeDestroy() {
    // 移除事件监听
    EventBus.$off(EventNames.TOGGLE_SIDEBAR, this.handleToggleSidebar)
  },
  methods: {
    /**
     * 处理侧边栏折叠事件
     */
    handleToggleSidebar() {
      // 这里可以添加额外的处理逻辑
    }
  }
}
</script>

<style scoped>
.sidebar-container {
  transition: width 0.28s;
  width: 210px;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
  background-color: #304156;
}

.sidebar-container.is-collapse {
  width: 64px;
}

.scrollbar-wrapper {
  overflow-x: hidden !important;
}

.sidebar-logo-container {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #2b2f3a;
  text-align: center;
  overflow: hidden;
}

.sidebar-logo-container.collapse {
  width: 64px;
}

.sidebar-logo-link {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-logo {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 12px;
}

.sidebar-title {
  display: inline-block;
  margin: 0;
  color: #fff;
  font-weight: 600;
  line-height: 50px;
  font-size: 14px;
  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-logo-container.collapse .sidebar-logo {
  margin-right: 0px;
}

/* 菜单样式 */
.el-menu {
  border: none;
  height: 100%;
  width: 100% !important;
}

.el-menu-item, .el-submenu__title {
  height: 56px;
  line-height: 56px;
}

/* 折叠动画 */
.sidebarLogoFade-enter-active,
.sidebarLogoFade-leave-active {
  transition: opacity 0.3s;
}

.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
  opacity: 0;
}
</style>